<template>
	<view class="min-h-[100vh] bg-background">
		<view class="p-[24rpx]">
			<template v-if="couponList.length">
				<view class="mb-[24rpx] last:mb-0" v-for="item in couponList" :key="item.id">
					<up-transition :show="true" mode="fade-up">
						<view class="px-[24rpx] bg-white rounded-[16rpx]">
							<view class="py-[24rpx] flex items-center justify-between">
								<view class="">
									<view class="text-[30rpx]">{{ item.name }}</view>
									<view class="text-[22rpx] w-fit text-second px-[6rpx] py-[2rpx] bg-third rounded-[8rpx] mt-[16rpx]">{{ item.endDate }}结束</view>
								</view>
								<view class="gradient-text">
									<view class="text-right">
										<text class="text-[22rpx]">￥</text>
										<text class="text-[44rpx] font-bold">{{ item.discountAmount }}</text>
									</view>
									<view class="text-[22rpx]">满{{ item.ableAmount }}可用</view>
								</view>
							</view>
							<up-line dashed></up-line>
							<view class="py-[24rpx] flex items-center justify-between">
								<view class="text-[22rpx] text-gray flex items-center mr-[20rpx]" @click="item.unfold = !item.unfold">
									<view
										class="transition-all"
										:class="{
											'line-clamp-1': !item.unfold
										}"
									>
										{{ item.brief }}
									</view>
									<up-icon
										:class="{
											'!rotate-0': item.unfold
										}"
										class="rotate-180 transition-all"
										name="arrow-down"
										size="20rpx"
									></up-icon>
								</view>
								<view
									:class="{
										'bg-gray text-white': item.userTotalNum <= 0
									}"
									class="px-[16rpx] py-[6rpx] gradient-btn rounded-[8rpx] text-[24rpx] text-white w-fit flex-shrink-0"
									@click="receive(item)"
								>
									{{ item.userTotalNum <= 0 ? '领完了' : '领取' }}
								</view>
							</view>
						</view>
					</up-transition>
				</view>
			</template>
			<up-empty mode="list" marginTop="200rpx" text="暂无优惠券" v-else></up-empty>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { getCouponListByReceive, receiveCoupon } from '@/config/api/coupon';
import utils from '@/utils/utils';
onLoad(() => {
	getList();
});
onReachBottom(() => {
	if (couponList.value.length < params.total) {
		params.pageNum++;
		getList();
	}
});
const couponList = ref([]);
const params = reactive({
	pageNum: 1,
	pageSize: 10,
	total: 0
});
//领券
const receive = async (item) => {
	try {
		const res = await receiveCoupon({
			couponId: item.id
		});
		if (res.code == 200) {
			item.userTotalNum--;
			utils.showToast('领取成功');
		}
	} catch (e) {
		//TODO handle the exception
	}
};
const getList = async () => {
	try {
		const res = await getCouponListByReceive(params);
		if (res.code == 200) {
			couponList.value = couponList.value.concat(
				res.rows.map((e) => {
					return {
						...e,
						unfold: false
					};
				})
			);
			params.total = res.total;
		}
	} catch (e) {
		//TODO handle the exception
	}
};
</script>

<style scoped lang="scss">
//文字渐变
.gradient-text {
	background-image: linear-gradient(5deg, #ed7833 0%, #eb555e 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
//按钮渐变
.gradient-btn {
	background: linear-gradient(90deg, #ed7833 0%, #eb555e 100%);
}
</style>
